import {Component, OnInit, OnDestroy} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {IProduct, ProductsService} from "../../services/products.service";
import {TelegramService} from "../../services/telegram.service";

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    <div class="centered">
      <h2 class="mb">{{ product.title }}</h2>
      <br />
      <img [src]="product.image" [alt]="product.title">
      <p>{{ product.text }}</p>
      <p>{{ product.time }}</p>
      <a [href]="product.link" target="_blank">Посмотреть курс</a>
    </div>
  `,
})
export class ProductComponent implements OnInit, OnDestroy {
  product: IProduct;

  constructor(
    private products: ProductsService,
    private telegram: TelegramService,
    private route: ActivatedRoute, // получаем то что в url адресе, а конкретно id продукта
    private router: Router // router для навигации
  ) {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.product = <IProduct>this.products.getById(id);
    }
    this.goBack = this.goBack.bind(this);
  }

  goBack() {
    this.router.navigate(['/']);
  }

  ngOnInit(): void {
    this.telegram.BackButton.show();
    this.telegram.BackButton.onClick(this.goBack)
  }

  ngOnDestroy(): void {
    this.telegram.BackButton.offClick(this.goBack)
  }
}
